<template>
    <div class="helsinkiContainer">
        <div class="centerArea">
            <div class="topText">
                <h1>Helsinki</h1>
                <p>It's a poorly kept secret that Supercell's first office was a snug 35m² room that had to fit 15
                    people, their laptops and a coffee-maker. Eventually the CEO moved his desk (a cardboard box at the
                    time) out into the hallway to free up some space. In 2021, after outgrowing a number of locations
                    around Helsinki, we opened our own, custom-designed office on the seafront, just South of the city
                    center.</p>
            </div>
            <div class="gridRowContainer">
                <div class="rollImg" :style="{ transform: 'translateX(' + translateX + '%)' }">
                    <img src="/src/assets/img/careers/ourOffices/helsinki01.webp"
                         alt="">
                    <img src="/src/assets/img/careers/ourOffices/helsinki02.webp" alt="">
                    <img src="/src/assets/img/careers/ourOffices/helsinki03.webp" alt="">
                    <img src="/src/assets/img/careers/ourOffices/helsinki04.webp" alt="">
                    <img src="/src/assets/img/careers/ourOffices/helsinki05.webp"
                         alt="">
                </div>
            </div>
            <div class="bottomText">
                <p>The Helsinki office is home to over 550 passionate professionals from various backgrounds and walks
                    of life. Arounds two thirds of us are directly involved with making games. In addition to five live
                    teams, we have numerous new game teams prototyping and developing future titles. We mostly stick to
                    speaking in English for work, but you'll hear chatter in languages from all over the world around
                    the office. Also, we are lucky as the options for office coffee are numerous!</p>
                <p>Every week starts with a company breakfast while on Fridays we get together for an all-hands
                    gathering to share game updates and company news. This often gives way to refreshments, play
                    sessions and casual conversations.</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, onMounted, onUnmounted, nextTick} from 'vue';

const translateX = ref(0);
const scrollStart = 440; // 起始滚动高度
const scrollEnd = 920; // 结束滚动高度
let maxTranslatePercentage = 0; // 最大滚动百分比

const handleScroll = () => {
    const scrollPosition = window.pageYOffset;
    if (scrollPosition >= scrollStart && scrollPosition <= scrollEnd) {
        const scrollRange = scrollEnd - scrollStart;
        const currentScroll = scrollPosition - scrollStart;
        const percentage = (currentScroll / scrollRange) * maxTranslatePercentage;
        translateX.value = percentage;
    } else if (scrollPosition > scrollEnd) {
        translateX.value = maxTranslatePercentage;
    } else if (scrollPosition < scrollStart) {
        translateX.value = 0;
    }
};

const calculateMaxTranslatePercentage = async () => {
    await nextTick();
    requestAnimationFrame(() => {
        const gridRowContainer = document.querySelector('.gridRowContainer');
        if (gridRowContainer) {
            const containerWidth = gridRowContainer.offsetWidth;
            const availableWidth = containerWidth * 0.94; // 两边各留3%
            const rollImg = document.querySelector('.rollImg');
            if (rollImg) {
                const rollImgWidth = rollImg.offsetWidth;
                const excessWidth = rollImgWidth - availableWidth;
                if (excessWidth > 0) {
                    maxTranslatePercentage = -(excessWidth / rollImgWidth) * 100;
                }
            }
        }
    });
};

onMounted(() => {
    setTimeout(() => {
        window.addEventListener('scroll', handleScroll);
        calculateMaxTranslatePercentage();
        window.addEventListener('resize', calculateMaxTranslatePercentage);
    }, 100); // 延迟100毫秒
});

onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
    window.removeEventListener('resize', calculateMaxTranslatePercentage);
});
</script>

<style scoped>
.centerArea {
    padding: 80px 0 40px 0;
}

.centerArea h1 {
    text-align: center;
    font-size: 44px;
    font-weight: bolder;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.centerArea p {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 30px;
}

.topText, .bottomText {
    width: 50%;
    margin: 0 auto;
}

.gridRowContainer {
    padding: 0 3%;
    width: 100%;
    display: flex;
    column-gap: 30px;
    flex-direction: row;
    margin-bottom: 30px;
    overflow: hidden;
}

.rollImg {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.rollImg img {
    max-height: 450px;
    width: auto;
    max-width: 600px;
    object-fit: cover;
}

.rollImg img:first-child,
.rollImg img:last-child {
    height: 380px;
}
</style>